<script setup lang="ts">
import { Document, Picture, Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { getHxApi, getTitle, getAllData } from '@/api/capacityAnalysis'
import { ElMessage, type ElTreeSelect } from 'element-plus'
import { timeFormat } from '@/utils/publicMethods'
import html2canvas from 'html2canvas'

const currentDate = new Date()
const previousDate = new Date(currentDate)
previousDate.setDate(previousDate.getDate() - 1)
const fromData = ref({
  date: [previousDate, currentDate],
  latnId: '',
  userName: '',
  hx_number: ['111'],
  hx_name: ['111'],
  hx: 0
})
const searchBtn = () => {
  getTitleFn()
  getAllDataFn()
  ElMessage({ message: '查询成功！', type: 'success' })
}
const cacheData = ref<any>([])
const huaXiaoTreeFn = async (node: Node, resolve: (data: any[]) => void) => {
  if (node.level === 0) {
    await getHxApi(0).then((res: any) => {
      if (res.code === 0) {
        resolve(
          res.message.map((item: any) => {
            return {
              label: item.name,
              value: item.id,
              type: 'dept',
              idseq: item.idseq
            }
          })
        )
      }
    })
  } else if (node.level >= 1) {
    await getHxApi(node.data.value).then((res: any) => {
      if (res.code === 0) {
        resolve(
          res.message.map((item: any) => {
            return {
              label: item.name,
              value: item.id,
              type: 'dept',
              idseq: item.idseq
            }
          })
        )
      }
    })
  }
}
const titleInfo = ref<any>([])
const getTitleFn = async () => {
  console.log(fromData.value)

  const params = {
    id: fromData.value.hx_name[0],
    start: timeFormat(fromData.value.date[0]).YYYYMMDD,
    end: timeFormat(fromData.value.date[1]).YYYYMMDD
  }
  await getTitle(params).then((res: any) => {
    // console.log(res)
    titleInfo.value = res.message
  })
}

const tableData = ref<any>([])
const getAllDataFn = async () => {
  tableData.value = []
  const params = {
    id: fromData.value.hx_name[0],
    start: timeFormat(fromData.value.date[0]).YYYYMMDD,
    end: timeFormat(fromData.value.date[1]).YYYYMMDD
  }
  await getAllData(params).then((res: any) => {
    if (res.message) {
      tableData.value = res.message
    } else {
      ElMessage({ message: '当前时间段没有数据', type: 'error' })
    }
  })
}

const getRegionTreeNode = (node: any, info: any) => {
  console.log(info)
  // fromData.value.hx_name = []
  fromData.value.hx_name = [info.data.idseq]
  // fromData.value.hx_name = traverseObject(info).reverse()
  // console.log(fromData.value.hx_name.join('.'))
}

// const traverseObject = (obj: any, result: any = []) => {
//   // 检查当前对象的level
//   if (obj.level === 1) {
//     result.push(obj.data.idseq) // 将当前对象的value添加到结果数组中
//     return result
//   }

//   // 如果level大于1，继续遍历parent对象
//   if (obj.parent) {
//     result.push(obj.data.idseq) // 将当前对象的value添加到结果数组中
//     return traverseObject(obj.parent, result)
//   }
// }

const tableBox = ref<HTMLElement>()
const pngLoading = ref(false)
const downloadBtn = () => {
  pngLoading.value = true
  html2canvas(document.querySelector('#tableBox') as HTMLElement)
    .then((canvas) => {
      const imgData = canvas.toDataURL('image/png')
      const link = document.createElement('a')
      link.href = imgData
      link.download = '产能分析日通报表.png'
      link.click()
      ElMessage({ message: '图片导出成功！', type: 'success' })
    })
    .finally(() => {
      pngLoading.value = false
    })
  // console.log(fromData.value)
}
const excelLoading = ref(false)
const exportExcelBtn = async () => {
  excelLoading.value = true
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href =
    import.meta.env.VITE_APP_URL +
    '/newModule/export?id=' +
    fromData.value.hx_name[0] +
    '&start=' +
    timeFormat(fromData.value.date[0]).YYYYMMDD +
    '&end=' +
    timeFormat(fromData.value.date[1]).YYYYMMDD +
    '&uuid=' +
    Date.parse(new Date().toString())
  // link.setAttribute('download', props.fromInfo.title + '详情.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  excelLoading.value = false
}

onMounted(() => {
  // getHxApiFn(fromData.value.hx)
  getTitleFn()
  getAllDataFn()
})
</script>
<template>
  <div class="container">
    <el-form :inline="true" :model="fromData">
      <el-form-item label="施工单位：">
        <!-- @node-click="getHuaXiaoTreeNode" -->
        <el-tree-select
          clearable
          v-model="fromData.hx_number"
          lazy
          :load="huaXiaoTreeFn"
          :cache-data="cacheData"
          node-key="value"
          multiple
          :multiple-limit="1"
          :render-after-expand="false"
          check-strictly
          check-on-click-node
          @node-click="getRegionTreeNode"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="选择时间范围：">
        <el-date-picker
          v-model="fromData.date"
          type="daterange"
          range-separator="和"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="default"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="searchBtn">查询</el-button>
        <el-button type="success" :loading="excelLoading" :icon="Document" @click="exportExcelBtn"
          >导出Excel</el-button
        >
        <el-button type="success" :loading="pngLoading" :icon="Picture" @click="downloadBtn"
          >导出图片</el-button
        >
      </el-form-item>
    </el-form>
    <div class="pngBox">
      <el-scrollbar always class="scrollbarBox">
        <div id="tableBox" ref="tableBox">
          <div>
            <img
              src="../../../assets/images/channengTitle.jpg"
              style="width: 90%; height: 100%; margin-left: 5%; margin-top: 10px"
            />
          </div>
          <div style="text-align: center; margin-top: 20px; color: yellow; font-size: 22px">
            <p
              v-for="i in titleInfo"
              :key="i.levelid"
              style="text-align: center; margin-top: 20px; color: yellow; font-size: 22px"
            >
              <b style="letter-spacing: 5px">{{ i.contentinfo }}</b>
            </p>
          </div>
          <div style="text-align: center; margin-top: 20px; color: yellow; font-size: 22px"></div>
          <div class="content" v-if="tableData.length > 0">
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
              v-for="(i, index) in tableData"
              :key="index"
            >
              <tr v-if="i[0]" style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    height: 40px;
                    font-size: 14px;
                    font-weight: bold;
                    background: rgb(255, 192, 203);
                  "
                >
                  {{ i[0] }}
                </h6>
              </tr>
              <!----><!----><!----><!----><!---->
              <td style="padding: 10px; width: 100px">
                {{ i[1].titleone }}
              </td>
              <td style="padding: 10px; width: 100px">
                {{ i[1].titletwo }}
              </td>
              <td style="padding: 10px; width: 100px">
                {{ i[1].titlethree }}
              </td>
              <td style="padding: 10px; width: 100px">
                {{ i[1].titlefour }}
              </td>
              <td style="padding: 10px; width: 100px">
                {{ i[1].titlefive }}
              </td>
              <!----><!----><!----><!---->
              <tr v-for="iData in i[2]" :key="iData.sgdw.value">
                <td style="padding: 10px">{{ iData.sgdw.value }}</td>
                <td style="padding: 10px" :class="iData.xzkths.color">{{ iData.xzkths.value }}</td>
                <td style="padding: 10px" :class="iData.xzhdhs.color">{{ iData.xzhdhs.value }}</td>
                <td style="padding: 10px" :class="iData.qqylkths.color">
                  {{ iData.qqylkths.value }}
                </td>
                <td style="padding: 10px" :class="iData.newlv.color">{{ iData.newlv.value }}</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left">
                  <p v-for="(iEvaluate, index) in i[3]" :key="index">
                    <br />
                    <span>{{ iEvaluate }}</span>
                  </p>
                  <br />
                </td>
              </tr>
            </table>
          </div>
          <div class="content" v-else>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <!----><!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                综合积分(满分200)
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                客户响应积分(满分100)
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                主动维护积分(满分100)
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                装移修+变更性能在途工单(户)
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left">
                  <br /><span></span><br /><br /><br /><span></span><br /><br /><br /><span></span
                  ><br /><br />
                </td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装(户)
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：新装宽带
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：新装天翼高清
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：新装天翼看家
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：新装智能家居
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：新装全屋WIFI
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：门锁
                </h6>
              </tr>
              <!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!---->
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：FTTR
                </h6>
              </tr>
              <!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!---->
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-新装 其中：云桌面
                </h6>
              </tr>
              <!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!---->
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-变更性能
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-移机
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-修障
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  客户响应积分-修障-其中宽带修障
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">需交付量</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                在途遗留量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  主动维护积分（客户满意修复积分）
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                需交付量（1区1日一单）
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日交付量（1区1日一单）
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                未完成责任区数
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                日清日结率
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  有工单用户二维码绑定
                </h6>
              </tr>
              <!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                装移修维更工单数
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                其中已绑定二维码用户数
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                其中未绑定二维码用户数
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">绑定率</td>
              <!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!---->
            </table>
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="background: white; width: 90%; margin: 0px auto; text-align: center"
            >
              <tr style="width: 100%; height: 40px; position: relative">
                <h6
                  style="
                    padding: 10px;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    background: rgb(255, 192, 203);
                  "
                >
                  待装库
                </h6>
              </tr>
              <!----><!----><!----><!---->
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">分公司</td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                需交付待装库工单
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                当日出库交付工单
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                待装7日未出库工单量
              </td>
              <td style="padding: 10px; background: rgb(255, 192, 203); width: 100px">
                待装7日未出库占比
              </td>
              <!----><!----><!----><!---->
              <tr>
                <td style="padding: 10px">小计</td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px"></td>
                <td style="padding: 10px">0.0%</td>
              </tr>
              <!----><!----><!----><!---->
              <tr>
                <td>点评：</td>
                <td colspan="5" style="text-align: left"><br /><span></span><br /><br /></td>
              </tr>
            </table>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<style scoped lang="less">
.container {
  padding: 8px;
  // overflow-y: scroll;
  .scrollbarBox {
    width: 900px;
    padding: 0 150px;
    :deep(.el-scrollbar__bar.is-vertical) {
      width: 10px;
    }
  }
}
.pngBox {
  width: 900px;
  margin-left: 18%;
  margin-top: 20px;
  margin-bottom: 100px;
  height: calc(100vh - 240px);
  #tableBox {
    // height: 100vh;
    background: rgb(170, 17, 17);
  }
  .content {
    padding-bottom: 20px;
  }
}
.R {
  background: rgb(255, 192, 203);
}
.G {
  background: rgb(127, 255, 212);
}
</style>
